var map;
var currentMarker = null;
var polylineSimu = null;

//Chargement de l'API
function loadScript() {
	var script = document.createElement("script");
	script.src = "http://www.google.com/jsapi?key=AIzaSyCPmP7rR3dwKLF-wuGZPo2TBdiJTmrbPq0&callback=loadMaps";
	script.type = "text/javascript";
	document.getElementsByTagName("head")[0].appendChild(script);
}

//Chargement de la map
function loadMaps() 
{
	google.load("maps", "3", {
		"callback" : showMap,
		other_params: "sensor=false"
	});
}

//Affichage de la map
function showMap()
{
	// initialisation de la map
	document.getElementById("map").style.display = "block";
	var mapOptions = {
			navigationControlOptions: {
				style: google.maps.NavigationControlStyle.ANDROID
			},
			zoom: 6,
			center : new google.maps.LatLng(48.833, 2.333),
			mapTypeId: google.maps.MapTypeId.ROADMAP //On indique qu'il s'agit d'une "carte routière"
	};
	map = new google.maps.Map(document.getElementById("map"), mapOptions);

	initSimu();
}

/*
 * ====== Partie : fonctionnement du simulateur ======
 */

/**
 * Méthode qui initialise la polyline du simulateur
 */
function initSimu(){
	var polyOptions = {
			strokeColor: '#FF0000',
			strokeOpacity: 1.0,
			strokeWeight: 3
	};
	polylineSimu = new google.maps.Polyline(polyOptions);
	polylineSimu.setMap(map);
}

/**
 * Méthode qui ajoute un point à la ligne en cours et centre la map
 */
function addToPoly(latitude, longitude){
	var latLng = new google.maps.LatLng(latitude, longitude)
	path = polylineSimu.getPath();
	path.push(latLng);
	
	addMarkerImage(latitude, longitude);
	
	// centrer la map
	centrerMapPoly(polylineSimu);
}

/**
 * Méthode qui ajoute une image à un marqueur
 * @param latitude
 * @param longitude
 */
function addMarkerImage(latitude, longitude){
	//--> Configuration de l'icône personnalisée
	var image = {
		url: '../images/homme.png',
		size: new google.maps.Size(25, 40),
		origin: new google.maps.Point(0,0),
		// L'ancre de l'image. Correspond au point de l'image que l'on raccroche à la carte. Par exemple, si votre îcone est un drapeau, cela correspond à son mâts
		anchor: new google.maps.Point(5, 10)
	};
	
	removeMarker(currentMarker); // suppression de l'ancien marqueur

	//--> Insertion du marker avec l'ajout de l'icône
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(latitude, longitude),
		map: map,
		// On définit l'icône de ce marker comme étant l'image définie juste au-dessus
		icon: image
	});
	
	currentMarker = marker;
}

/**
 * Méthode qui supprime le marqueur courant
 */
function removeMarker(marker)
{
	if(marker != null){
		marker.setMap(null);
	}
}

/**
 * Méthode qui centrer la map sur la polyline
 */
function centrerMapPoly(polyline){
	var bounds = new google.maps.LatLngBounds();
	polyline.getPath().forEach(function(e) {
	    bounds.extend(e);
	});
	map.fitBounds(bounds);
}



/*
 * ====== Partie : affichage d'un parcours réalisé ======
 */

/**
 * Méthode qui créer la polyline du parcours réalisé
 * @param jsonString
 */
function stringJson(jsonString){
	var pts = [];
	var json_parsed = $.parseJSON(jsonString);
	$.each(json_parsed.marker, function(i,item){
		pts[i] = new google.maps.LatLng(parseFloat(item['lat']), parseFloat(item['lng']));
	});
	addPolyline(pts);
}

/**
 * Méthode qui ajoute une polyline à partir d'un tableau de coordonnées
 * et ajoute un marque sur le point de départ et d'arrivée
 * @param pts
 */
function addPolyline(pts) {
	var lineSymbol = {
	path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
	var polyline = new google.maps.Polyline({
		path: pts,
		geodesic: true,
		strokeColor: "#0000FF",
		strokeOpacity: 1.0,
		strokeWeight: 2,
		icons: [{
		  icon: lineSymbol,
		  offset: '100%',
		  repeat : '30px'
		}]
	});
	polyline.setMap(map);
	
	var depart = pts[0];
	var arrivee = pts[pts.length-1];
	
	// marqueur départ et arrivée
	addMarker(depart, arrivee);
	
	// centrer la map
	centrerMapPoly(polyline);
}

/**
 * Méthode qui ajoute le marker de départ et d'arrivée du parcours
 */
function addMarker(depart, arrivee){
	// marker depart
	new google.maps.Marker({
		map : map, 
		position : depart,
		animation: google.maps.Animation.DROP,
		draggable : true,
		title    : "Départ"
	});
	
	// marker arrivee
	new google.maps.Marker({
		map : map, 
		position : arrivee,
		animation: google.maps.Animation.DROP,
		draggable : true,
		title    : "Arrivée"
	});
}

// lancement du script au chargement de la page
window.onload = loadScript();